<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box,
        section {
            width: 200px;
            height: 200px;
            border: 2px solid;
            margin: 20px;
        }

        header {
            display: flex;
        }

        section div {
            width: 80px;
            height: 80px;
            background-color: red;
        }

        footer {
            width: 300px;
            height: 150px;
            background-color: palegoldenrod;
            margin: 100px auto;
        }

        input {
            width: 300px;
            height: 40px;
            border: 1px solid royalblue;
            outline: none;
            /* padding: 10px; */
            /* 首行缩进 */
            text-indent: 15px;
        }
    </style>

    <script src="./test.js"></script>
</head>

<body>
    <header>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </header>


    <section>
        <div></div>
    </section>

    <section>
        <div></div>
    </section>

    <input type="text" id="input">
    <footer></footer>

    <div class="box1" style="width: 200px;height: 200px;background-color: aqua;"></div>


    <script>

        //----- 鼠标事件

        let div = document.getElementsByClassName('box');
        let section = document.getElementsByTagName('section');
        let clickHandle = function () {
            console.log('你触发了事件');
        }

        div[0].addEventListener('click', clickHandle)
        div[1].addEventListener('dblclick', clickHandle)
        div[2].addEventListener('mousedown', clickHandle)
        div[3].addEventListener('mouseup', clickHandle)
        div[4].addEventListener('mousemove', clickHandle)


        section[0].addEventListener('mouseenter', function () {
            console.log('你进入了section');

        })
        section[0].addEventListener('mouseleave', function () {
            console.log('你离开了section');
        })

        section[1].addEventListener('mouseover', function () {
            console.log('你进入了section');

        })
        section[1].addEventListener('mouseout', function () {
            console.log('你离开了section');
        })

        //练习：鼠标按下元素放大，鼠标释放元素还原
        let footer = document.getElementsByTagName('footer')[0];
        footer.onmousedown = function () {
            footer.style.transform = 'scale(1.5)';

            footer.onmouseup = function () {
                footer.style.transform = 'scale(1)'
            }
        }

        //----- 键盘事件

        let input = document.getElementById('input');
        input.onkeydown = function () {
            console.log('你按下了一个键');
            input.onkeypress = function (event) {
                console.log(event.key);
                console.log('你按下了一个键1111');
            }
        }


        //---- window事件（页面事件）
        // 1.页面加载
        // window.onload=function(){
        //    alert('正在加载这个页面')
        // }
        // 2.页面卸载
        // window.onunload=function(){
        //     console.log('页面卸载');
        // }

        //3.页面滚动
        document.body.onscroll = function () {
            // console.log('触发页面滚动事件');
            console.log(pageYOffset);
        }

    </script>




</body>

</html>